main{
    width: 100%;
    background-color: #fff;
    margin-bottom: 20px;
    nav{
        width: 100%;
        height: 74px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 5px 5px 5px rgb(245, 246, 247) ;
        div{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            .logo{
                width: 204px;
                height: 34px;
                margin-top: 20px;
                cursor: pointer;
                img{
                    width: 204px;
                    height: 34px;
                }
            }
            ul{
                margin-top: 29px;
                padding-left: 40px;
                width: 950px;
                height: 16px;
                display: flex;
                li{
                    padding:0 22px;
                    line-height: 16px;
                    a{
                        &:hover{
                            color:#cf0a2c;
                        }
                    }
                }
            }
            .search{
                margin-top: 20px;
                width: 246px;                
                height: 38px;
                border-radius: 20px;
                background-color: rgb(241, 243, 245);
                div{
                    input{
                        border: none;
                        outline: none;
                        text-indent: 1em;
                        font-size: 14px;
                        border-top-left-radius: 20px;
                        border-bottom-left-radius: 20px;
                        margin-left: 5px;
                        background-color: rgb(241, 243, 245);

                    }
                    span{
                        font-size: 20px;
                        line-height: 38px;
                        opacity: .5;
                        text-align: center;
                        margin-left: 5px;
                        &:nth-of-type(2){
                            cursor: pointer;
                        }
                    }
                }
            }
        }

    }


    // 内容区域

    // 内容区域导航
    .detailnav{
        width: 100%;
        height: 28.4px;
        margin-top: 10px;
        div{
            width: 1200px;
            height: 28.4px;
            padding-top: 10px;
            margin: 0 auto;
            a{
                font-size: 12px;
                color: #666;
                &:hover{
                    color: #333;
                }
            }
            span{
                color: #666;
                opacity: .5;
            }
        }
    }

    // 内容区域
    .detailmain{
        width: 1200px;
        display: flex;
        margin: 0 auto{
            top: 20px;
        }
        // 放大镜
        img{
            display: block;
        }
        .main{
            width: 500px;
            min-height: 500px;
            position: relative;
            margin: 0;
        }
        .main .smallBox{
            width: 450px;
            height: 500px;
            position: absolute;
        
        }
        .main .smallBox img{
            width: 450px;
            height: 500px;
        }
        .main .smallBox span{
            position: absolute;
            width: 100px;
            height: 100px;
            background: rgba(255,244,200, 0.6);
            left: 0;
            top: 0;
            cursor: pointer;
            display: none;
        }
        .main .bigBox{
            width: 450px;
            height: 500px;
            border: 1px solid;
            position: absolute;
            z-index: 1000;
            left: 450px;
            top: 0;
            overflow: hidden;
            display: none;
        }
        .main .bigBox img{
            width: 1350px;
            height: 1500px;
            position: absolute;
        }
        .main .picBox{
            width: 450px;
            height: 130px;
            position: absolute;
            top: 530px;
            display: flex;
            justify-content: space-between;
        }
        .main .picBox .pic{
            width: 200px;
            height: 130px;
        }
        .main .picBox .pic img{
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        // 款式区域
        .right{
            width: 730px;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            padding-left: 30px;
            // 标题
            h1{
                margin-right: 45px;
                font-weight: 400;
                font-size: 20px;
            }
            // 说明
            span{
                margin-top: 10px;
                margin-bottom: 15px;
                font-size: 14px;
                color: #ca141d;
            }
            // 价格区域
            .rightprice{
                width: 700px;
                height: 115px;
                background-color: #f5f5f5;
                padding-top: 14px;
                .rtprice{
                    line-height: 30px;
                    span{
                        padding-left: 10px;
                        padding-right: 15px;
                        color: #3a3a3a;
                        font-size: 12px;
                    }
                    i{
                        font-size: 18px;
                        color:#ca141d ;
                    }
                    b{
                        font-size: 24px;
                        color:#ca141d ;
                        margin-left: 10px;
                    }
                    m{
                        font-size: 18px;
                        color: #a4a4a4;
                        text-decoration: line-through;
                    }
                }
                .promotion{
                    display: flex;
                    line-height: 8px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        padding-left: 10px;
                        padding-right: 15px;
                    }
                    div{
                        display: flex;
                        flex-direction: column;
                        span{
                            padding-left: 5px;
                            i{
                                padding: 2px 6px;
                                color: #ca141d;
                                border: 1px solid #ca141d;
                            }
                            b{
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }

            // 分割线
            hr{
                margin-top: 5px;
                opacity: .3;
            }

            // 服务说明
            .description{
                width: 100%;
                margin-top: 16px;
                .service{
                    height: 40px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        &:nth-of-type(1){
                            margin-left: 10px;
                            margin-right: 20px;
                        }
                        &:nth-of-type(2){
                            padding: 5px 20px;
                            border: 1px solid #d8d6d6;
                        }
                        &:nth-of-type(3){
                            margin-left: 20px;
                            i{
                                color:#ca141d ;
                            }
                        }
                    }
                }
                .explain{
                    margin: 10px 0;
                    height:24px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        &:nth-of-type(1){
                            margin-left: 83px;
                        }
                        &:nth-of-type(3){
                            margin-left: 15px;
                            color: #267eff;
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                }
                .code{
                    height: 18px;
                    margin-bottom: 5px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        &:nth-of-type(1){
                            margin-left: 10px;
                            margin-right: 20px;
                        }
                    }
                }
            }

            // 商品类型
            .goodstype{
                width: 100%;
                margin-top: 16px;
                // 选择颜色
                .goodscolor{
                    width: 100%;
                    min-height: 50px;
                    display: flex;
                    align-items: center;
                    color: #3a3a3a;
                    margin-bottom: 10px;
                    font-size: 12px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        margin: 0 10px;
                    }
                    .colorimg{
                        padding: 5px 10px;
                        line-height: 40px;
                        margin-right: 10px;
                        border: 1px solid #d8d6d6;
                        &:nth-of-type(1){
                            border: 1px solid #ca141d;
                        }
                    }
                }
                // 选择版本
                .goodsedition{
                    width: 100%;
                    min-height: 40px;
                    display: flex;
                    align-items: center;
                    color: #3a3a3a;
                    font-size: 12px;
                    margin-bottom: 10px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        margin: 0 10px;
                    }
                    .edition{
                        padding: 5px 10px;
                        margin-right: 10px;
                        border: 1px solid #d8d6d6;  
                        &:nth-of-type(1){
                            border: 1px solid #ca141d;
                        }
                    }
                }
                // 选择套餐
                .goodspackage{
                    width: 100%;
                    min-height: 40px;
                    display: flex;
                    align-items: center;
                    color: #3a3a3a;
                    font-size: 12px;
                    margin-bottom: 10px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        margin: 0 10px;
                    }
                    .package{
                        padding: 5px 10px;
                        margin-right: 10px;
                        border: 1px solid #d8d6d6; 
                        &:nth-of-type(1){
                            border: 1px solid #ca141d;
                        }
                   
                    }
                }
                // 选择服务
                .goodssevice{
                    width: 100%;
                    min-height: 40px;
                    display: flex;
                    align-items: center;
                    color: #3a3a3a;
                    font-size: 12px;
                    margin-bottom: 10px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        margin: 0 10px;
                    }
                    .sevice{
                        padding: 5px 10px;
                        margin-right: 10px;
                        border: 1px solid #d8d6d6;                    
                    }
                }
                // 推荐
                .goodsrecommed{
                    width: 100%;
                    min-height: 76px;
                    display: flex;
                    align-items: center;
                    color: #3a3a3a;
                    font-size: 12px;
                    margin-bottom: 10px;
                    span{
                        color: #3a3a3a;
                        font-size: 12px;
                        margin: 0 10px;
                    }
                    .recommed{
                        width: 141px;
                        overflow: hidden;
                        padding: 5px 10px;
                        margin-right: 10px;
                        border: 1px solid #d8d6d6;                    
                        display: flex;
                        img{
                            width: 48px;
                            height: 48px;
                        }
                        .recommedtxt{
                            width: 67px;
                            height: 40px;
                            line-height: 20px;
                            //文本显示两行，多余省略为省略号
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2; //多行在这里修改数字即可
                            overflow:hidden;
                            /* autoprefixer: ignore next */
                            -webkit-box-orient: vertical;
                        }
                    }

                }
                // 已选择商品、加入购物车
                .goodsquantity{
                    width: 100%;
                    padding-top: 10px;
                    min-height: 83.6px;
                    display: flex;
                    flex-direction: column;
                    color: #3a3a3a;
                    font-size: 12px;
                    margin-bottom: 10px;
                    margin-left: 10px;
                    p{
                        i{
                            margin-left: 10px;
                            color:#ca141d;
                        }
                    }
                    .quantity{
                        margin-top: 10px;
                        display: flex;
                        .addqt{
                            margin-right: 10px;
                            display: flex;
                            input{
                                width:42px ;
                                height: 44px;
                                outline: none;
                                text-align: center;
                                border: 1px solid #d8d6d6;
                            }
                            .add{
                                display: flex;
                                flex-direction: column;
                                span{
                                    width: 21px;
                                    height: 22px;
                                    border: 1px solid #d8d6d6;
                                    margin: 0;  
                                    text-align: center;
                                    cursor: pointer;                      
                                }
                            }
                        }
                        button{
                            width: 172px;
                            height: 46px;
                            margin-right: 10px;
                            border: none;
                            color: #fff;
                            font-size: 18px;
                            cursor: pointer;
                            &:nth-of-type(1){
                                background-color: #fd803d;
                            }
                            &:nth-of-type(2){
                                background-color: #ca151d;
                                a{
                                    color: #fff;
                                }
                            }
                        }
                    }

                }
            }
        }
    }

    
    //商品详情区域
    .goodsdetail{
        width: 1200px;
        margin: 0 auto{
            top: 100px;
        }
    }

}


// 区域分隔线
.line{
    width: 100%;
    height: 2px;
    background-color: #ddd;
    margin-top: 50px;
}